<template>

  <div>
    <!-- <div v-html="this.tableData[4].context"></div> -->

    <div id="x"></div>
    <el-form>
      <el-form-item>
        <el-input
          placeholder="请输入内容"
          class="input-with-select"
          style="width: 300px"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button type="primary" style="margin-left: 15px" @click="handleAdd"
          >添加文章</el-button
        >
      </el-form-item>
    </el-form>

    <div v-for="(item, id) of tableData" :key="id">
      <div>
        <el-card class="card">
          <el-row :gutter="10">
            <el-col :span="3"
              ><img :src="'http://localhost:5000/files/'+item.avatar" class="image"
            /></el-col>
            <el-col :span="21">
              <el-button type="text" class="button" @click="handleWatch(item)">
                {{ item.id }} {{ item.title }}
              </el-button>
              <!-- <div class="intro" v-html="item.context"></div> -->
              <div class="other">
                <el-button type="text" @click="deleted(item)" class="el-icon-delete"
                  >删除</el-button
                >
              </div></el-col
            >
          </el-row>
        </el-card>

       
      </div>
    </div>

    <!-- 添加的弹窗 -->
    <el-dialog :visible.sync="dialogFormVisible" title="文章信息" fullscreen>
      <el-form :model="formData">
        <el-form-item label="文章标题" label-width="120px">
          <el-input v-model="formData.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作者" label-width="120px">
          <el-input v-model="formData.author" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="内容" label-width="120px"> -->
          <el-input v-model="formData.context" autocomplete="off" type="hidden"></el-input>
        <!-- </el-form-item> -->
        <el-form-item label="文章封面" label-width="120px">
          <el-input v-model="formData.avatar" autocomplete="off"></el-input>
          <el-upload
            class="avatar-uploader"
         
            :action="uploadActionUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="formData.avatar" :src="dialogFormAvatarFullUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <!-- 富文本编辑器 -->
      <h3>文章内容</h3>
      <div slot="footer" class="home">
        <div id="demo1"></div>
      </div>
      <!-- <el-button @click="getEditarticle">保存文章</el-button> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getEditorData">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看的弹窗 -->
    <div>
      <el-dialog title="文章信息" :visible.sync="dialogVisible" width="60%">
        <div>
          <h1>{{ Data.title }}</h1>

          <!-- <div :html=this.formParams.html></div> -->
          <div v-html="Data.context"></div>
          <!-- <el-button type="primary" @click="comment()">发布评论</el-button> -->
          <div v-for="item of commentaa" :key="item.id">
              <h6>
                  <span>
                    {{ item.username }}：{{ item.commentText }}</span>
              </h6>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    
  </div>
</template>

<script>
import wangEditor from "wangeditor";
import { getList, addarticles ,deleteId, } from "../api/articles";
import { getarictlesList } from "../api/articlecomments";
export default {
  inject:["reload"],
  data() {
    return {
      
      t:'',
      commentData: {
        id: "",
        comment: "",
      },
      editor: null,
      editorData: "",
      tableData: [],
      commentaa: [],
      article: {
        title: "",
        context: "",
      },
       Data:{
        title:'',
        context:''
      },
      formData: {
        title: "",
        context: "",
        author: "",
        avatar:""
      },
      dialogFormVisible: false,
      dialogVisible: false,
      imageUrl: "",
      dialogFormAvatarFullUrl:''
    };
  },
  computed:{
    uploadActionUrl(){
      let baseUrl='http://localhost:5000/'
      let url='files/uploadfiles'
      return baseUrl + url
    },
  
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.formData.avatar = URL.createObjectURL(file.raw);
      // 保存相对路径
      let prePath=res.data[0];
      // 显示使用完整路径
      let fullPath=URL.createObjectURL(file.raw);
      this.formData.avatar = prePath
      this.dialogFormAvatarFullUrl=fullPath
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.formData.name = "";
      this.formData.context = "";
      this.formData.author = "";
    },

    handleWatch(item) {
      this.dialogVisible = true;
      console.log(this.tableData);
      console.log(item);
      console.log(item.avatar);
      this.t=item.avatar
      console.log(this.t);
      this.q='http://localhost:5000/files/'+this.t;
      console.log(this.q);
      this.Data.title = item.title;
      this.Data.context = item.context;
      getarictlesList(item.id).then((res) => {
        // console.log(res.data.data);
        this.commentaa = res.data.data.data
        console.log(this.commentaa);
        
      });
      this.commentaa = [];
      
      
    },
    handleClick(row) {
      console.log(row);
    },
deleted(item) {
      console.log(item);
      
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteId(item.id)
            .then((res) => {
              console.log(res);
              
                this.reload();
              
            })
            .catch((err) => {
              console.log(err);
            });
          this.fetchData(this.article);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // getEditarticle() {
    //   // 通过代码获取编辑器内容
    //   var data = this.editor.txt.html();

    //   console.log(data);
    //   this.formData.context=data
    // },
     getEditorData() {
      this.dialogFormVisible = false;
      var data = this.editor.txt.html();
      console.log(data);
      this.formData.context = data;
      this.tableData.push(data);
      //添加到数据库并且返回数据
      console.log(this.formData);
      addarticles(this.formData).then((res) => {
        
        console.log(res);
        console.log();
        this.reload()
        
      });
      this.fetchData(this.article);
    }, fetchData() {
      getList(this.article)
        .then(({ data }) => {
          var res = data.data.data;
          console.log(res);
          this.tableData = res;
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
   
    this.fetchData(this.article);
    const editor = new wangEditor(`#demo1`);
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml;
      console.log(this.editorData);
    };
    // 创建编辑器
    editor.create();
    this.editor = editor;
    
  },
};
</script>

<style>

.s {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.card {
  padding: 20px 50px;
  width: 700px;
  height: 160px;
  background: white;
  margin-top: 5px;
}

.button {
  font-size: 28px;
  color: black;
}

.image {
  width: 120px;
  height: 120px;
}

.intro {
  height: 40px;
}

.other {
  text-align: right;
}

/* 添加文章弹窗 */
.tanchuang{
  width: 800px;
  
}
.el-col-21{
width: 500px;
margin-left: 45px;
}
</style>